<template>
  <div class="center">
    <n-card :bordered="false">
      <BasicForm
        @register="register"
        @submit="handleSubmit"
        @reset="handleReset"
        :submitButtonText="'查询'"
        :show-feedback="false"
        :resetButtonText="'重置'"
      >
        <template #statusSlot="{ model, field }">
            <n-button  @click="info">
              <template #icon>
                <n-icon>
                  <Add />
                </n-icon>
              </template>
              添加新权限
            </n-button>
        </template>
      </BasicForm>
    </n-card>
    <n-card :bordered="false" class="proCard">
      <BasicTable
        :columns="columns"
        :request="loadDataTable"
        :row-key="(row) => row.id"
        ref="actionRef"
        :actionColumn="actionColumn"
        :pagination="pagination"
        :scroll-x="1600"
      >
      </BasicTable>
    </n-card>
    <Model
      :showModal="showModal"
      :FormData="FormData"
      :formValue="formValue"
      :title="title"
      :rules="rules"
      @ModelClick="ModelClick"
      @close="close"
    >
    </Model>
    <ModelBox
      :ModelBox="ModelBox"
      :center="center"
      :title="title"
      @determine="determine"
      @close="close"
    ></ModelBox>
  </div>
</template>

<script lang="ts">
import { h, defineComponent, reactive, ref, onMounted } from 'vue';
import { useMessage } from 'naive-ui';
import { BasicTable, TableAction } from '@/components/Table';
import { BasicForm, useForm } from '@/components/Form/index';
import { fetchAuthListPage,addAuth,deleteAuth,updateAuth } from '@/api/Auth/index'; //权限接口
import { useRouter } from 'vue-router';
import { Model } from '@/components/Model';
import { Add  } from '@vicons/ionicons5'
import { ModelBox } from '@/components/ModelBox';
export default defineComponent({
  name:'jurisdictionManagement',
  components: {
    BasicTable,
    BasicForm,
    Model,
    Add,
    ModelBox,
  },
  setup() {
    const columns = [
      {
        type: 'selection',
        fixed: 'left',
      },
      {
        title: '序号',
        key: 'Serial',
        width: 100,
      },
      {
        title: '权限名称',
        key: 'authName',
        width: 200,
        render(row) {
          if (row.authName) {
            return row.authName;
          } else {
            return '-';
          }
        },
      },
      {
        title: '接口地址',
        key: 'uri',
        width: 200,
        render(row) {
          if (row.uri) {
            return row.uri;
          } else {
            return '-';
          }
        },
      },
      {
        title: '备注',
        key: 'remark',
        width: 200,
        render(row) {
          if (row.remark) {
            return row.remark;
          } else {
            return '-';
          }
        },
      },
    ];
    const actionRef = ref();
    const router = useRouter();
    const formRef: any = ref(null);
    const center = ref(null);
    const message = useMessage();
    const title = ref(null);
    const showModal = ref(false);
    const ModelBox = ref(false);
    const formBtnLoading = ref(false);
    const formValue = ref({});
    const FormData = ref([
      {
        label: '权限名称',
        type: 'n-input',
        enName: 'authName',
        clearable: true,
        size: 'small',
        show: true,
        placeholder: '请输入权限名称',
        span: 24,
      },
      {
        label: '接口地址',
        type: 'n-input',
        enName: 'uri',
        clearable: true,
        size: 'small',
        placeholder: '请输入接口地址',
        show: true,
        span: 24,
      },
      {
        label: '备注',
        type: 'n-input',
        InputType: 'textarea',
        enName: 'remark',
        clearable: true,
        show: true,
        size: 'small',
        placeholder: '请输入备注信息',
        span: 24,
      },
    ]);
    const formParams = ref({
      name: '',
      address: '',
      date: null,
    });
    const params = ref({ size: 10, page: 1 });
    const Obj = ref({});
    const actionColumn = reactive({
      width: 220,
      title: '操作',
      key: 'action',
      fixed: 'right',
      render(record) {
        return h(TableAction as any, {
          text: true,
          actions: [
            {
              label: '编辑',
              type: 'primary',
              text: true,
              onClick: handleEdit.bind(null, record),
            },
            {
              label: '删除',
              type: 'primary',
              text: true,
              onClick: handleDelete.bind(null, record),
            },
          ],
          select: (key) => {
            message.info(`您点击了，${key} 按钮`);
          },
        });
      },
    });
    const schemas = [ { component: 'NButton', size: 'small', name: '添加新权限', type: '', slot: 'statusSlot',}];
    const [register, {}] = useForm({
      gridProps: { cols: '1 s:1 m:2 l:3 xl:4 2xl:4' },
      labelWidth: 80,
      schemas,
    });
    const loadDataTable = async (res) => {
      const data = await fetchAuthListPage({ ...params.value, ...res });
      data.list.map((res, index) => {
        res.Serial = ++index;
      });
      return data;
    };

    const handleEdit = (record: Recordable) => {
      title.value = '编辑权限';
      formValue.value = record;
      showModal.value = true;
    };

    const handleDelete = (record: Recordable) => {
      Obj.value = record;
      ModelBox.value = true;
      title.value = '删除';
      center.value = '是否确定要删除?';
    };

    //查询
    const handleSubmit = (row) => {
      try {
        params.value = { ...params.value, ...row };
        actionRef.value.reload();
      } catch (e) {
        console.error(e);
      }
    };

    //重置
    const handleReset = (row) => {
        params.value = {}
        actionRef.value.reload();
    }
    //新增权限
    const info = async () => {
      formValue.value = {};
      title.value = '新增权限';
      showModal.value = true;
    };

    //模态框确定
    const ModelClick = async (e) => {
      if(title.value == '新增权限') {
        await addAuth(formValue.value);
      }else if(title.value == '编辑权限') {
        await updateAuth(formValue.value);
      }
      actionRef.value.reload();
      showModal.value = e;
    };
    //模态框关闭
    const close = (e) => {
      showModal.value = e;
      ModelBox.value = e;
    };
    //删除确定按钮
    const determine = async(e) => {
      ModelBox.value = e;
      await deleteAuth(Obj.value.id);
      actionRef.value.reload();
    }
    onMounted(() => {});
    return {
      rules: {
        authName: {
          required: true,
          message: '请输入权限名称',
          trigger: ['blur', 'input'],
        },
        uri: {
          required: true,
          message: '请输入接口地址',
          trigger: ['blur', 'input'],
        },
        remark: {
          required: true,
          message: '请输入备注信息',
          trigger: ['blur', 'input'],
        },
      },
      info,
      handleReset,
      schemas,
      router,
      formRef,
      Obj,
      message,
      actionRef,
      showModal,
      ModelBox,
      formBtnLoading,
      formParams,
      params,
      actionColumn,
      register,
      loadDataTable,
      handleEdit,
      handleDelete,
      columns,
      handleSubmit,
      ModelClick,
      determine,
      close,
      title,
      FormData,
      formValue,
      center,
    };
  },
});
</script>

<style lang="less" scoped>
.center :deep .n-card {
  margin: 0 0 20px 0;
}
</style>
